<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="__STATIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<script type="text/javascript" src="__STATIC__/jquery-2.1.3.js"></script>
		<link href="__STATIC__/bootstrap/b-date/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
		<link href="__STATIC__/cropper/cropper.min.css" rel="stylesheet" media="screen" />
		<script src="__STATIC__/bootstrap/b-date/bootstrap-datetimepicker.min.js"></script>
		<script src="__STATIC__/cropper/cropper.min.js"></script>
		<script src="__STATIC__/cropper/crop_act_add.js"></script>
		<script src="__STATIC__/bootstrap/b-date/bootstrap-datetimepicker.zh-CN.js"></script>
		<script charset="utf-8" src="__STATIC__/Ue/ueditor.config.js"></script>
		<script charset="utf-8" src="__STATIC__/Ue/ueditor.all.min.js"></script>
		<script src="__STATIC__/Ue/lang/zh-cn/zh-cn.js"></script>
		<style>
			body {
				margin: 0;
			}
			label {
				color: grey;
			}
			.highlight {
				border: 1px solid #e1e1e8;
				background: #fff;
				border-radius: 4px;
				margin: 0;
				padding: 15px 0 0;
			}
			.pt5 {
				padding-top: 5px;
			}
			.alert {
				margin-bottom: 0;
			}
			.input-group {
				display: inline-table;
			}
			.instru-img {
				width: 80px;
				height: 80px;
				margin: 0 5px 5px 0px;
			}
			.instru .active {
				border: 1px solid rgba(102, 175, 233, .6);
				-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
				box-sizing: content-box;
			}
		</style>
	</head>

	<body>
		<!-- top -->
		<div class="container">
			<div class="row">
				<!-- right -->
				<div class="col-md-12">
					<div class="row" style="margin:5px 0;">
						<div id="actTips" class="col-xs-12 alert alert-info">
							<h5>小秘书提示：你可以在这里发起活动</h3>
						</div>
					</div>
					<div class="row highlight form-horizontal" style="padding:5px 10px;">
						<div id="cond" style="display:none;">{$content}</div>
						<!-- 活动表单 begin -->
						
							<!-- 活动风格类型 -->
							<div class="form-group">
								<label for="type" class="col-xs-2 control-label">活动风格类型：</label>
								<div class="col-xs-6">
									<input name="type" id="type" class="form-control" />
								</div>
							</div>
							<!-- 活动主题 -->
							<div class="form-group">
								<label for="title" class="col-xs-2 control-label">活动主题：</label>
								<div class="col-xs-6">
									<input type="text" class="form-control" name="title" id="title" placeholder="请填写活动主题">
								</div>
								<div class="col-xs-3 pt5"></div>
							</div>
							<form action="{:U('Activity/act_save_themeimg')}" id="formUrl"  method="post" enctype="multipart/form-data">
							<input type="hidden" id="aid" name="aid"/>							
							<!--活动主题图片 -->
							<div class="form-group">
								<label for="title" class="col-xs-2 control-label">主题图片：</label>
								<div class="col-xs-6">
									<input type="file" name="theme" class="form-control" id="theme">
								</div>
								<div class="col-xs-3 pt5"><code id="logo_err">比例：8:5</code>
								</div>
							</div>
							<!--活动图片预览-->
							<div class="form-group" id="img_preview">
								<div class="docs-data" hidden="hidden">
									<input class="form-control" id="dataX" name="dataX" type="text" placeholder="x">
									<input class="form-control" id="dataY" name="dataY" type="text" placeholder="y">
									<input class="form-control" id="dataWidth" name="dataWidth" type="text" placeholder="width">
									<input class="form-control" id="dataHeight" name="dataHeight" type="text" placeholder="height">
								</div>
								<label for="title" class="col-xs-2 control-label">图片预览：</label>
								<div class="col-md-7">
									<div class="row">
										<div class="col-md-10">
											<div class="img-container">
												<img id="showimg">
											</div>
										</div>
									</div>
								</div>
							</div>
							</form>
							<!--微信图文分享链接-->
							<div class="form-group">
								<label class="col-xs-2 control-label">微信图文分享链接:</label>
								<div class="col-xs-6">
									<input class="form-control" id="shareurl" name="shareurl" placeholder="微信图文分享链接"/>
								</div>
								<div class="col-xs-4 pt5"><code id="logo_err">微信图文链接</code>
								</div>
							</div>
							<!--活动形式-->
							<div class="form-group">
								<label class="col-xs-2 control-label">活动形式:</label>
								<div class="col-xs-6">
									<select class="form-control" id="jointype" name="jointype">
										<option value="3">混合场</option>
										<option value="1">个人专场</option>
										<option value="2">乐队专场</option>
									</select> 
								</div>
							</div>
							<!-- 详细地址 -->
							<div class="form-group">
								<label for="address" class="col-xs-2 control-label">活动地点：</label>
								<div class="col-xs-6">
									<input class="form-control" id="address" name="address" placeholder="例（广州天河区体育中心**大道002号）">
								</div>
							</div>
							<!-- 活动时间 -->
							<div class="form-group">
								<label for="atime" class="col-xs-2 control-label">活动时间：</label>
								<div id="sdtp" class="col-xs-3 input-group date" style="padding-left: 14px; padding-right: 10px;">
									<input type="text" class="form-control" id="atime" name="atime" placeholder="请选择活动开始时间" readonly>
									<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
								</div>
								<div id="edtp" class="col-xs-3 input-group date" style="padding-left: 14px; padding-right: 10px;">
									<input type="text" class="form-control" id="aetime" name="aetime" placeholder="请选择活动结束时间" readonly>
									<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
								</div>
							</div>
							<!--活动乐器-->
							<div class="form-group">
								<label class="col-xs-2 control-label">活动乐器:</label>
								<div class="col-xs-6 instru">
									<notempty name="instrus">
									<foreach name="instrus" item='v'>
										<img src="{$v.imgurl}" data-id="{$v.id}" class="instru-img" onclick="select(this)" />
									</foreach>
									<else/>
										<span>暂无数据，请到图标管理中增加乐器</span>
									</notempty>
								</div>
								<div class="col-xs-4 pt5"><code id="logo_err">请仔细选择</code>
								</div>
							</div>
							<!-- 活动详情 -->
							<div class="form-group">
								<label for="remark" class="col-xs-2 control-label">活动详情：</label>
								<div class="col-xs-10">
									<script type="text/plain" id="editor" style="width: 90%; height: 600px;"></script>
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-6 col-xs-offset-2">
									<button type="button" class=" form-control btn btn-success" id="sub">提交</button>
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>
		<script src="__JS__/ue_ready.js"></script>
		<script>
		var instrunumber=0;//记录选择了多少个乐器
		//选择乐器时选中取消效果
		function select(o){
			if($(o).attr("class")=="instru-img"){
				$(o).addClass('active');
				instrunumber=instrunumber+1;
			}else{
				$(o).removeClass("active");
				instrunumber=instrunumber-1;
			}
		}
			$("#sub").click(function() {
				var type =$('#type').val();
				var theme = $.trim($('#theme').val()); //主题图片
				var title = $.trim($('#title').val()); //活动主题
				var jointype = $('#jointype').val();//活动类型
				var shareurl = $('#shareurl').val();//活动分享链接
				var address = $('#address').val(); //活动地址
				var aetime = $('#aetime').val(); //活动结束时间
				var atime = $('#atime').val(); //活动开始时间
				var content = ue.getContent(); //活动内容
				if (!theme) {alert("请上传主题相片");return false;}
				if (!title) {alert("请添加活动主题");return false;}
				if (!address) {alert("请填写活动详细地址");return false;}
				if (!aetime) {alert("请选择活动时间");return false;}
				if (!atime) {alert("请选择活动时间");return false;}
				if (!content) {alert("请添加活动内容");return false;}
				if(!type){alert('请添加活动类型');return false;}
				if(!instrunumber){alert('请选择活动乐器');return false;}
				var instrus = $('.active');//记录页面中所有选择到的乐器的DOM元素
				var instru = [];//记录所有选中乐器ID
				for(var i=0;i<instrus.length;i++){
					instru[i] = $(instrus[i]).attr('data-id');
				}
				var act_info = {instru:instru,type:type,title:title,jointype:jointype,shareurl:shareurl,address:address,aetime:aetime,atime:atime,content:content};
				//先提交非主题图片内容，再提交主题图片
				$.post("{:U('Activity/act_save_nthemeimg')}",act_info,function(res){
					if(res){
						console.log(res.aid);
						$('#aid').val(res.aid);
						$("#formUrl").submit();	
					}
				});
				
			});

			function addHour(date, num) {
					date.setHours(date.getHours() + num);
					return date;
				}
				// 初始化开始时间控件

			function initSdtp() {
					$('#sdtp').datetimepicker({
							language: 'zh-CN',
							format: "yyyy-mm-dd hh:ii",
							todayBtn: 1,
							autoclose: 1,
							forceParse: 1,
							startDate: addHour(new Date(), 2),
							pickerPosition: "bottom-left"
						})
						.on('changeDate', function(ev) {
							$('#atime_err').hide();
							$('#aetime_err').hide();
							$('#edtp').datetimepicker('remove');
							initEdtp(new Date(Date.parse($('#atime').val().replace(/-/g, '/'))));
						});
				}
				// 初始化结束时间控件

			function initEdtp(date) {
				var end = new Date(date.getTime() + 86399000*5 - (date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()) * 1000);
				$('#edtp').datetimepicker({
						language: 'zh-CN',
						format: "yyyy-mm-dd hh:ii",
						autoclose: 1,
						forceParse: 1,
						startDate: addHour(date, 1),
						endDate: end,
						startView: 2,
						pickerPosition: "bottom-left"
					})
					.on('changeDate', function(ev) {
						$('#aetime_err').hide();
					});
			}
			initSdtp();
		</script>
	</body>

</html>

</html>